/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 16:18:38
 * @version: v1.0.0
 * @Descripttion: 节点展示设置
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-07-21 15:00:52
 * @Auditor: 
 */
import React, { useState, useCallback, useEffect, useContext } from 'react';
import context from '../context';
import FieldList from './_FieldList';
import FormVariable from '../formVariable/_FormVariable';
import { createBpmnXMLNode, BPMN_NODE_TYPE } from './../../../utils/bpmnUtils';
import { FormField, UserTaskSelfProps } from './../../../interface';

const T = window.$app.t;

type Type = 'hideOptions' | 'editOptions';

export default () => {
  const { self, modeler } = useContext(context);
  const [visible, setVisible] = useState(false);
  const [type, setType] = useState<Type>('hideOptions');
  const [hideOptions, setHideOptions] = useState<FormField[]>([]);
  const [editOptions, setEditOptions] = useState<FormField[]>([]);

  const _self = self as UserTaskSelfProps;

  useEffect(() => {
    let hideOptions = _self.businessObject?.extensionElements?.values?.[1]?.values || [];
    let editOptions = _self.businessObject?.extensionElements?.values?.[2]?.values || [];

    hideOptions = hideOptions.map((item: FormField) => {
      return item.options ? JSON.parse(item.options) : {}
    })

    editOptions = editOptions.map((item: FormField) => {
      return item.options ? JSON.parse(item.options) : {}
    })

    setHideOptions(hideOptions);
    setEditOptions(editOptions);
  }, [_self]);

  useEffect(() => {
    _self.businessObject!.extensionElements = Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.EXTENSION_ELEMENTS), {
      values: [
        _self.businessObject?.extensionElements?.values?.[0] || createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_ACTION_DATA),

        Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_INVISIBLE_LIST), {
          values: hideOptions.map(item => {
            return Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_VARIABLE), {
              ...item, options: JSON.stringify(item)
            })
          })
        }),
        
        Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_EDITABLE_NODE), {
          values: editOptions.map(item => {
            return Object.assign(
              createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_EDITTABLE_NODE_CHILD),
              { lpKey: item.fieldName, ...item, options: JSON.stringify(item) })
          })
        }),

        _self.businessObject?.extensionElements?.values?.[3]
      ]
    })
  }, [hideOptions, editOptions, _self, modeler]);

  const onCancel = useCallback(() => setVisible(false), []);

  const showFormVariable = useCallback((type: Type) => {
    setVisible(true);
    setType(type);
  }, []);

  const onOk = useCallback((rows: FormField[]) => {
    const setStateFn = type === 'hideOptions' ? setHideOptions : setEditOptions;

    setStateFn((prev: FormField[]) => {
      const fieldsName = prev.map(item => item.fieldName);
      return prev.concat(rows.filter(item => !fieldsName.includes(item.fieldName)));
    })

    setVisible(false);
  }, [type]);

  const onDelField = useCallback((fieldName: string, type: string) => {
    const setStateFn = type === 'hideOptions' ? setHideOptions : setEditOptions;

    setStateFn((prev: FormField[]) => {
      return prev.filter(item => item.fieldName !== fieldName);
    })
  }, []);

  return (
    <>
      <FieldList
        onDelField={(fieldName) => onDelField(fieldName, 'hideOptions')}
        addBtnClick={() => showFormVariable('hideOptions')}
        list={hideOptions}
        title={T('hideOptions')} />

      <FieldList
        onDelField={(fieldName) => onDelField(fieldName, 'editOptions')}
        addBtnClick={() => showFormVariable('editOptions')}
        list={editOptions}
        title={T('editOptions')} />

      <FormVariable all title={T('controlSelection')} onOk={onOk} onCancel={onCancel} visible={visible} />
    </>
  )
}
